<template>
	<view class="change-email">
		<up-cell-group class="setting-form" :border="false">
			<up-cell :title="$t('page.change.email.query1')">
				<template #value>
					<up-input v-model="formData.email" border="none"
						:placeholder="$t('page.change.email.query1.placeholder')"></up-input>
				</template>
			</up-cell>
		</up-cell-group>
		<text class="tips">{{$t('change.password.with.email.tips')}}</text>
		<up-code-input hairline size="100rpx" borderColor="#525252" fontSize="48rpx" color="#ddd" :space="0"
			class="code-input" v-model="formData.code"></up-code-input>
		<up-code ref="uCodeRef" :startText="$t('change.password.with.email.get.code')" changeText="X"
			:endText="$t('change.password.with.email.retrieve')" @change="codeChange"></up-code>
		<text class="sent-link-btn" :class="{ disabled: !formData.email }" @tap="getCode">{{ sentLabel }}</text>
		<view class="actions">
			<up-button type="primary" size="large" shape="circle" :disabled="!formData.code || !formData.email"
				@tap="handleSubmit">{{$t('page.change.email.submit.btn')}}</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getEmailCode,
		modifyEmail
	} from '../../apis/components/system';
	import {
		useAppStore
	} from '../../store/app';
	import {
		useI18n
	} from "vue-i18n";
	import {
		i18Replace
	} from '../../utils/functions';
	const {
		t
	} = useI18n();

	const store = useAppStore();
	const uCodeRef = ref(null);

	const formData = reactive({
		code: "",
		email: ""
	})

	const sentLabel = ref('');
	const codeChange = (text) => {
		if (!isNaN(Number(text))) {
			sentLabel.value = i18Replace(t('change.password.with.email.retrieve.count'), {
				s: text
			});
		} else {
			sentLabel.value = text;
		}
	};

	const getCode = async () => {
		if (!formData.email) return;
		if (uCodeRef.value.canGetCode) {
			try {
				if (!uni.$u.test.email(formData.email)) {
					uni.$u.toast(t('page.change.email.field.error1'));
					return;
				}
				await getEmailCode(formData.email);
				uCodeRef.value.start();
			} catch (err) {
				uni.$u.toast(typeof err === "string" ? err : err.message);
			}
		}
	};

	const handleSubmit = async () => {
		try {
			await modifyEmail(formData);
			await store.refreshUserInfo();
			uni.navigateBack();
		} catch (err) {
			uni.$u.toast(typeof err === "string" ? err : err.message);
		}
	}
</script>

<style lang="scss" scope>
	.change-email {
		padding: 24rpx 32rpx;
		@include flex(column);
		align-items: stretch;
		text-align: center;

		.setting-form {
			border-radius: 16rpx;
			margin-bottom: 40rpx;

			& ::v-deep .u-cell__body__content {
				flex: none;
				width: 208rpx;
			}
		}

		.tips {
			// font-family: Alibaba PuHuiTi 3.0;
			font-size: 24rpx;
			line-height: 28rpx;
			opacity: 0.6;
			margin-bottom: 32rpx;
		}

		.code-input {
			margin: 0 auto 38rpx;
			background-color: #222d49;
		}

		.sent-link-btn {
			margin-bottom: 152rpx;

			// font-family: PingFangSC;
			font-size: 28rpx;
			line-height: 1;
			color: #64B7F6;

			&.disabled {
				color: #808080;
			}
		}

		.actions {
			padding: 0 38rpx;
		}
	}
</style>